import React, { useEffect, useState } from 'react'
import { Input, Switch, message, Select, DatePicker, List, Card } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { Link } from "react-router-dom"
import { ClockCircleOutlined, FrownOutlined } from '@ant-design/icons'
import style from "./index.module.scss"
import { Demo } from '../../../components/Customer/TableComponent'
import { ManagementAsync, getIdAction, SpecificQueryAsync, GradeSortListAsync, MoneySortListAsync, OrderSortListAsync, TimeSortListAsync } from '../../../store/customerStore/action'
import { SearchComponent } from '../../../components/Operating/Search';
import { Bounced } from '../../../components/Operating/bounced'


export default function Note() {

    // 列表内容
    const [DataList, setDataList] = useState([
        {
            key: '1',
            id: 1,
            name: 'admin',
            time: '2020-1-10',
            number: '200人',
            content: '尊敬的用户，为了给您带来更好的体验，新年活动将于2018年12月31日22：00-2018年12月31日09:00期间进行系统升级，升级期间系统提现、借款入口将不能访问。升级后可正常提现和借款。给您带来的不便，敬请谅解。感谢您一如既往的支持。'

        },
        {
            key: '2',
            id: 2,
            name: 'admin',
            time: '2020-1-10',
            number: '200人',
            content: '尊敬的用户，为了给您带来更好的体验，新年活动将于2018年12月31日22：00-2018年12月31日09:00期间进行系统升级，升级期间系统提现、借款入口将不能访问。升级后可正常提现和借款。给您带来的不便，敬请谅解。感谢您一如既往的支持。'

        },
        {
            key: '3',
            id: 3,
            name: 'admin',
            time: '2020-1-10',
            number: '200人',
            content: '尊敬的用户，为了给您带来更好的体验，新年活动将于2018年12月31日22：00-2018年12月31日09:00期间进行系统升级，升级期间系统提现、借款入口将不能访问。升级后可正常提现和借款。给您带来的不便，敬请谅解。感谢您一如既往的支持。'

        },
        {
            key: '4',
            id: 4,
            name: 'admin',
            time: '2020-1-10',
            number: '200人',
            content: '尊敬的用户，为了给您带来更好的体验，新年活动将于2018年12月31日22：00-2018年12月31日09:00期间进行系统升级，升级期间系统提现、借款入口将不能访问。升级后可正常提现和借款。给您带来的不便，敬请谅解。感谢您一如既往的支持。'

        },
        {
            key: '5',
            id: 5,
            name: 'admin',
            time: '2020-1-10',
            number: '200人',
            content: '尊敬的用户，为了给您带来更好的体验，新年活动将于2018年12月31日22：00-2018年12月31日09:00期间进行系统升级，升级期间系统提现、借款入口将不能访问。升级后可正常提现和借款。给您带来的不便，敬请谅解。感谢您一如既往的支持。'

        },
        {
            key: '6',
            id: 6,
            name: 'admin',
            time: '2020-1-10',
            number: '200人',
            content: '尊敬的用户，为了给您带来更好的体验，新年活动将于2018年12月31日22：00-2018年12月31日09:00期间进行系统升级，升级期间系统提现、借款入口将不能访问。升级后可正常提现和借款。给您带来的不便，敬请谅解。感谢您一如既往的支持。'

        },
    ]);
    const dispatch = useDispatch()

    const thisId = useSelector((state) => state.customer.id)
    const [thisData, setThisData] = useState([])

    const newData = useSelector((state) => [...state.customer.data])
    const count = useSelector((state) => state.customer.count)
    const pageSize = useSelector((state) => state.customer.pageSize)
    const current = useSelector((state) => state.customer.current)

    console.log(pageSize);
    console.log(current);

    // useEffect(() => {
    //     // 获取列表数据
    //     dispatch(ManagementAsync({
    //         currentPage: current,
    //         pageSize: pageSize
    //     }))
    //         .then(res => {
    //             console.log(res)
    //             // setThisData(useSelector((state) => state.customer.obj))
    //             message.success('获取成功')
    //         })
    //         .catch(err => {
    //             console.log(err)
    //             message.error(err.errMsg)
    //         })
    // }, [current, pageSize])

    useEffect(() => {
        const newList = DataList.map(item => {
            console.log(123);
            return {
                title: <div className={style.ListTitle}>
                    <div className={style.titleLeft}>
                        <div><span>发布人员：</span>{item.name}</div>
                        <div><span>发布时间:</span>{item.time}</div>
                        <div><span>接收对象:</span>{item.number}</div>
                    </div>
                    <div>
                        <span className={style.delBtn} data-id={item.id} onClick={(e) => getID(e)}> 删除</span>
                    </div>
                </div>,
                content: <List.Item>
                    <Card title={<div className={style.ListTitle}>
                        <div className={style.titleLeft}>
                            <div><span>发布人员：</span>{item.name}</div>
                            <div><span>发布时间:</span>{item.time}</div>
                            <div><span>接收对象:</span>{item.number}</div>
                        </div>
                        <div>
                            <span className={style.delBtn} data-id={item.id} onClick={(e) => getID(e)}> 删除</span>
                        </div>
                    </div>}>{item.content}</Card>
                </List.Item>
            }
        })
        console.log(newList);
        setData(newList)
    }, [DataList.length])

    // <>
    //             <div>
    //                 <div><span>发布人员：</span>{item.name}</div>
    //                 <div><span>发布时间</span>{item.time}</div>
    //                 <div><span>接收对象</span>{item.number}</div>
    //             </div>
    //             <div>
    //                 <span className={style.delBtn} data-id={item.id} onClick={(e) => getID(e)}> 删除</span>
    //             </div>
    //         </>

    // useEffect(()=>{
    //     console.log(thisData.length);
    // },[thisData.length])

    function onChange(checked) {
        console.log(`switch to ${checked}`);
    }

    //搜索内容
    // let searchObj = {
    //     phone: '',
    //     name: '',
    //     time: ''
    // }
    // const onChange1 = (e) => {
    //     searchObj.phone = e.target.value
    // }
    // const onChange2 = (e) => {
    //     searchObj.name = e.target.value
    // }
    // const onChange3 = (date, dateString) => {
    //     console.log(dateString);
    //     searchObj.time = dateString
    // }

    // 搜索
    const Search = (searchObj) => {
        console.log('搜索');
        console.log(searchObj);
        dispatch(SpecificQueryAsync({
            currentPage: current,
            pageSize: pageSize,
            userObj: {
                // id: searchObj.id || null,
                member_grade_id: searchObj.phone || null,
                name: searchObj.name || null,
                registration_time: searchObj.time || null
            }
        }))
            .then(res => {
                console.log(res)
                // setThisData(useSelector((state) => state.customer.obj))
                message.success('查找成功')
            })
            .catch(err => {
                console.log(err)
                message.error(err.errMsg)
            })

    }

    // 弹框
    const [isModalVisible, setIsModalVisible] = useState(false);

    const searchHeight = (e) => {
        console.log(e.target.dataset.id)
        setIsModalVisible(true);
    }

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 删除
    const getID = (e) => {
        // console.log('as', e.target.dataset.id);
        // dispatch(getIdAction(e.target.dataset.id))
        // console.log('修改了', thisId);
        // this.props.history.push('/child02')
        const newData = DataList.filter(item => {
            return item.id != e.target.dataset.id
        })
        setDataList(newData)
    }

    // 表头
    const Columns = [
        {
            title: '编号',
            dataIndex: 'id',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '消息标题',
            dataIndex: 'title',
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '发布时间',
            dataIndex: 'time',
            ellipsis: true,
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '发布人员',
            dataIndex: 'personnel',
            ellipsis: true,
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '接收对象',
            dataIndex: 'number',
            ellipsis: true,
            align: 'center',
            render: (text) => <>{text}</>,
        },
        {
            title: '操作',
            dataIndex: 'id',
            align: 'center',
            render: (text) => {
                return <>
                    <span className={style.delBtn} data-id={text} onClick={(e) => searchHeight(e)}>查看 </span>
                    <span className={style.delBtn} data-id={text} onClick={(e) => getID(e)}> 删除</span>
                </>

            }

        },
    ];
    // const data = [
    //     {
    //         title: 'Title 1',
    //     },
    //     {
    //         title: 'Title 2',
    //     },
    //     {
    //         title: 'Title 3',
    //     },
    //     {
    //         title: 'Title 4',
    //     },
    // ];


    const [data, setData] = useState([
        {
            title: <>
                <div>
                    <div><span>发布人员：</span>11</div>
                    <div><span>发布时间</span>11</div>
                    <div><span>接收对象</span>11</div>
                </div>
                <div>
                    <span className={style.delBtn} onClick={(e) => getID(e)}> 删除</span>
                </div>
            </>,

        },
        {
            title: 'Title 2',
        },
        {
            title: 'Title 3',
        },
        {
            title: 'Title 4',
        }]
    )



    // const DataList = []

    const { Option } = Select;

    const setRank = (e) => {
        console.log(e);
        switch (e) {
            case 'number':
                dispatch(OrderSortListAsync({
                    currentPage: current,
                    pageSize: pageSize
                }))
                    .then(res => {
                        console.log(res)
                        // setThisData(useSelector((state) => state.customer.obj))
                        message.success('获取成功')
                    })
                    .catch(err => {
                        console.log(err)
                        message.error(err.errMsg)
                    })
                return
            case 'time':
                dispatch(TimeSortListAsync({
                    currentPage: current,
                    pageSize: pageSize
                }))
                    .then(res => {
                        console.log(res)
                        // setThisData(useSelector((state) => state.customer.obj))
                        message.success('获取成功')
                    })
                    .catch(err => {
                        console.log(err)
                        message.error(err.errMsg)
                    })
                return
            default:
                return
        }

    }

    return (
        <div className={style.Management}>
            {/* 搜索部分 */}
            {SearchComponent(Search)}

            {/* 表格部分 */}
            <div className={style.content}>
                <div className={style.title}>
                    <h4 className={style.titleHead}> <FrownOutlined spin /> 数据列表</h4>
                    <div className={style.titleRight}>
                        <button className={style.titleBtn}>发布短信</button>
                        <button className={style.titleBtn}>群发短信</button>
                        <Select className={style.titleBtn} onChange={setRank} defaultValue={'排序方式'}>
                            <Option value="number">编号</Option>
                            <Option value="time">发布时间</Option>
                        </Select>
                    </div>

                </div>

                {/* {Demo(Columns, thisData, { total: count, type: true, state: false })} */}
                <List
                    grid={{ gutter: 16, column: 1 }}
                    dataSource={data}
                    renderItem={item => (
                        item.content
                    )}
                />
                {Bounced(isModalVisible, handleOk, handleCancel)}
            </div>

        </div>
    )
}

